<template>
<SubLayout :breadcrumb="false" @refresh="() => {}" :showRefresh="false">
    <template #bread>
      <router-link to="/webview-register/registered">界面列表</router-link>
      <el-icon class="route-icon"> <arrow-right /> </el-icon>
      <!-- <router-link :to='`/webview-register/registered/${route.params.id}`'>界面详情</router-link> -->
      <!-- <el-icon class="route-icon"> <arrow-right /> </el-icon> -->
    </template>
    <template #default>
     <!-- 表单 -->
     <el-form
        class="form-area"
        :model="dataInfo"
        :rules="rules"
        label-position="left"
        ref="ruleFormRef"
        label-width="80"
      >
        <BaseForm v-model="dataInfo" :rules="rules" />
        <h5>Request Query</h5>
        <RequestQuery v-model="dataInfo" />
        <h5>界面描述</h5>
        <el-input v-model="dataInfo.desc" :autosize="{ minRows: 5, maxRows: 8 }" type="textarea" placeholder="请输入界面描述（控制在2000字内）"  maxlength="2000" show-word-limit />
        <h5>功能介绍</h5>
        <FunctionIntroduction v-model="dataInfo" />
        <h5>发布单位</h5>
        <CompanyForm v-model="dataInfo" :rules="rules" />
        <h5>服务商</h5>
        <ProviderForm v-model="dataInfo" :rules="rules" />
      </el-form>
      <!-- 提交 -->
      <footer v-if="dataInfo.status !== 4">
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="red"
          title="你确定要取消本次的审批内容吗?"
          @confirm="goBack"
        >
          <template #reference>
            <el-button>取消</el-button>
          </template>
        </el-popconfirm>
        <el-button type="primary" :loading="buttonLoading" @click="submit"
          >提交</el-button
        >
      </footer>
    </template>
  </SubLayout>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, computed, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import SubLayout from '@/components/SubLayout';
import { ArrowRight } from '@element-plus/icons-vue'
import {
  BaseForm,
  CompanyForm,
  ProviderForm,
  RequestQuery,
  FunctionIntroduction
} from './editComponents/'

import { useListManage } from "@/hooks";
import { InfoFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { createItem, updateItem, getDetail } from "@/api/webview-register";
import { phoneValid, emailValid } from '@/utils'
export default defineComponent({
  name: "WebviewRegisterRegister",
  components: {
    Header,
    FilterBar,
    SubLayout,
    BaseForm,
    CompanyForm,
    ProviderForm,
    RequestQuery,
    FunctionIntroduction,
    ArrowRight
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.push('/webview-register/apply')
    }

    const eidtType = ref('create')
    const buttonLoading = ref(false)
    const ruleFormRef = ref(null)
    const createFun = async() => {
      const res = await createItem(dataInfo.value).catch(() => {
        buttonLoading.value = false;
      })
      buttonLoading.value = false
      if(res.status === 200) {
        goBack()
      }
    }
    const updateFun = async() => {
      const res = await updateItem(dataInfo.value).catch(() => {
        buttonLoading.value = false;
      })
      buttonLoading.value = false
      if(res.status === 200) {
        router.go(-1)
      }
    }
    const submit = async() => {
      const { id, paramList, fileList } = dataInfo.value
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          let canSubmit = true
          paramList.map(item => {
            !item.name && (canSubmit = false)
          })
          fileList.map((item) => {
            !item.fileUrl && (canSubmit = false)
          });
          if(canSubmit) {
            buttonLoading.value = true
            eidtType.value === 'create'? createFun().catch(() => {
            buttonLoading.value = false;
          }) : updateFun().catch(() => {
            buttonLoading.value = false;
          })
          } else {
            ElMessage.warning('请检查参数名称是否为空，功能图片是否为空')
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    const dataInfo = ref({
      paramList: [],
      fileList: []
    })


    const rules = computed(() => {
      const baseRules = {
        // 表单校验规则
        appId: [{ required: true, message: "请选择所属应用" }],
        desc: [{ required: true,transform: (value) => (value ? value.trim() : ''), message: "请填写界面描述" }],
        name: [{ required: true,transform: (value) => (value ? value.trim() : ''), message: "请填写界面名称" }],
        orgId: [{ required: true,transform: (value) => (value ? value.trim() : ''), message: "请选择所属部门" }],
        hostType: [{ required: true,message: "请选择网络类型" }],
        publishPerson: [{ required: true,transform: (value) => (value ? value.trim() : ''), message: "请填写发布人姓名" }],
        publishPhone: [
          { required: true,transform: (value) => (value ? value.trim() : ''), message: "请填写发布人手机" },
          {validator: phoneValid, trigger: "blur"}
        ],
        requestUrl: [{ required: true,transform: (value) => (value ? value.trim() : ''), message: "请填写请求地址" }],
        publishEmail: [{validator: emailValid,trigger: "blur" }],
        providerEmail: [{validator: emailValid,trigger: "blur"}], 
      };

      return baseRules;
    });
    const getInfo = async() => {
      const res = await getDetail(route.params.id)
      dataInfo.value = res.data
    }
    onMounted(() => {
      if(route.params.id) {
        eidtType.value = 'update'
        getInfo();
      }
     
    });
    return {
      ruleFormRef,
      InfoFilled,
      dataInfo,
      buttonLoading,
      goBack,
      submit,
      rules,
      route
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 270px);
}
.form-area {
  padding-bottom: 70px;
}
.page-main {
  position: relative;
}
footer {
  text-align: right;
  margin-top: 20px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 70px;
  padding: 0 20px;
  line-height: 70px;
  background: #fff;
}
h5 {
  border-left: 4px solid #2E69EB;
  height: 16px;
  line-height: 16px;
  padding-left:10px;
  font-weight: 600;
  color: #3C475D;
  font-size: 16px;
  margin: 20px 0;
}
</style>